<template>
  <div class="grouping-page">
    <div class="page-body">
      <div class="teams-panel">
        <div class="panel-header">
          <div class="panel-header__info">
            <span class="panel-header__title">队伍管理区</span>
            <span class="panel-sub">共 {{ teams.length }} 个队伍</span>
          </div>
          <a-button class="panel-header__action" type="primary" ghost @click.stop="addTeam">
            <template #icon>
              <PlusOutlined />
            </template>
            新增队伍
          </a-button>
        </div>
        <div class="teams-loading" v-if="teamsLoading">
          <a-spin tip="加载队伍中..." />
        </div>
        <a-empty description="暂无队伍，点击新增队伍" v-else-if="!teams.length" />
        <div class="team-list" v-else>
          <div
            v-for="(team, index) in teams"
            :key="teamKey(team)"
            :class="[
              'team-card',
              { active: teamKey(team) === activeTeamKey, 'drag-over': teamKey(team) === dragOverTeamKey }
            ]"
            @click="setActiveTeam(team)"
            @dragover.prevent.stop="handleTeamDragOver(team)"
            @dragleave="handleTeamDragLeave(team)"
            @drop.prevent.stop="handleDrop(team)"
          >
            <div class="team-card__header">
              <div class="team-card__title">
                队伍 {{ index + 1 }}
              </div>
              <a-space>
                <a-popconfirm title="确定删除该队伍？" @confirm="removeTeam(team)">
                  <a-button type="text" danger size="small">删除</a-button>
                </a-popconfirm>
              </a-space>
            </div>

            <div class="team-card__captain">
              <a-select
                v-model:value="team.captainId"
                :options="captainOptions"
                placeholder="请选择队长"
                show-search
                style="width: 100%;"
                option-filter-prop="label"
                @change="handleCaptainChange(team, $event)"
                :loading="captainLoading"
                @click.stop
              />
            </div>

            <div class="team-card__members">
              <div class="member-grid">
                <div
                  class="member-slot"
                  v-for="(memberId, memberIndex) in team.memberIds"
                  :key="memberIndex"
                  @dragover.prevent
                  @drop.prevent.stop="handleDrop(team, memberIndex)"
                >
                  <template v-if="memberId">
                    <div class="member-card">
                      <a-tooltip :title="getMemberTooltip(memberId)">
                        <a-button
                          class="member-card__remove"
                          type="text"
                          size="small"
                          @click.stop="removeMember(team, memberIndex)"
                        >
                          <CloseOutlined />
                        </a-button>
                      </a-tooltip>
                      <div class="member-card__info">
                        <div class="member-name">{{ getMemberName(memberId) }}</div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="member-empty">
                      <UserOutlined class="member-empty__icon" />
                      <span>空位</span>
                    </div>
                  </template>
                </div>
              </div>
            </div>

            <div class="team-card__props">
              <div class="prop-switch">
                <span class="prop-switch__label">重选</span>
                <a-switch v-model:checked="team.propsRepick" @click.stop @change="handlePropsChange(team)" />
              </div>
              <div class="prop-switch">
                <span class="prop-switch__label">跳过</span>
                <a-switch v-model:checked="team.propsSkip" @click.stop @change="handlePropsChange(team)" />
              </div>
              <div class="prop-switch">
                <span class="prop-switch__label">否决</span>
                <a-switch v-model:checked="team.propsVeto" @click.stop @change="handlePropsChange(team)" />
              </div>
            </div>
            
          </div>
        </div>
      </div>

      <div class="draw-panel">
        <div class="panel-header">
          <div class="panel-header__info">
            <span class="panel-header__title">抽卡操作区</span>
          </div>
        </div>
        <div class="draw-panel__section">
          <span class="section-title">卡组选择</span>
          <div class="deck-selector" :class="{ 'is-loading': deckLoading }">
            <div class="deck-selector__loading" v-if="deckLoading">
              <a-spin />
            </div>
            <template v-else>
              <div
                v-for="deck in normalizedDecks"
                :key="deck.value"
                :class="['deck-card', { active: deck.value === selectedDeckId }]"
                @click="handleDeckSelect(deck)"
              >
                <div class="deck-card__shine"></div>
                <div class="deck-card__content">
                  <div class="deck-card__title">{{ deck.label }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <div class="draw-panel__section card-remain-section" v-if="selectedDeckId">
          <div class="card-remain-header">
            <span class="section-title">剩余选手</span>
            <a-button
              class="card-remain-refresh"
              size="small"
              type="text"
              :loading="cardRemainLoading"
              @click="loadCardRemainPlayers"
            >
              刷新
            </a-button>
          </div>
          <div class="card-remain-list">
            <template v-if="cardRemainPlayers.length">
              <a-tag v-for="player in cardRemainPlayers" :key="player.id" color="purple">{{ player.nickname }}</a-tag>
            </template>
            <a-empty v-else description="卡组暂无剩余选手" />
          </div>
        </div>

        <div class="draw-panel__section">
          <span class="section-title">抽卡</span>
          <a-space style="margin-top: 12px">
            <a-button
              class="draw-button"
              type="primary"
              :disabled="!selectedDeckId || isRevealing"
              :loading="drawing"
              @click="drawPlayers"
            >
              <template #icon>
                <ThunderboltOutlined />
              </template>
              抽取
            </a-button>
            <a-button class="reset-button" :disabled="!drawnPlayers.length" @click="clearDrawnPlayers">重置</a-button>
          </a-space>
        </div>
        
        <div class="draw-panel__result">
          <transition name="countdown-pop">
            <div class="reveal-overlay" v-if="isRevealing">
              <div class="reveal-ring"></div>
              <div class="reveal-glow"></div>
              <div class="reveal-number">{{ revealCountdownText }}</div>
              <div class="reveal-caption">
                <span v-if="revealCountdown > 0">即将揭晓</span>
                <span v-else>开战！</span>
              </div>
            </div>
          </transition>
          <transition name="celebrate-fade">
            <div class="celebrate-overlay" v-if="isCelebrating">
              <div class="celebrate-burst"></div>
              <div class="celebrate-burst celebrate-burst--delay"></div>
              <div class="celebrate-stars"></div>
              <div class="celebrate-text">
                <div class="celebrate-text__title">你的幸运儿是谁呢?</div>
                <div class="celebrate-text__subtitle">他们是</div>
              </div>
            </div>
          </transition>
          <div class="draw-card-list">
            <transition-group name="card-appear" tag="div" class="draw-card-list__inner">
            <div
              v-for="(player, drawIndex) in drawnPlayers"
              :key="player.id || player.account || player.nickname || drawIndex"
              class="draw-card"
              draggable="true"
              @dragstart="handleDragStart($event, player, drawIndex)"
              @dragend="handleDragEnd"
            >
                <div class="draw-card__frame">
                  <div class="draw-card__nickname">{{ player.nickname }}</div>
                  <div class="draw-card__divider"></div>
                  <div class="draw-card__info">
                    <div class="draw-card__position">
                      {{ player.position || '未知位置' }}
                    </div>
                    <div class="draw-card__desc">
                      {{ player.description || '这位选手等你选择' }}
                    </div>
                  </div>
                </div>
            </div>
            </transition-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="dotaGrouping">
import { onMounted, onUnmounted, ref, reactive, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { PlusOutlined, ThunderboltOutlined, UserOutlined, CloseOutlined } from '@ant-design/icons-vue'
import tool from '@/utils/tool'
import groupingApi from '@/api/dota/groupingApi'
import matchPlayerApi from '@/api/dota/matchPlayerApi'

const route = useRoute()
const matchId = computed(() => route.query.matchId || '')

const teams = ref([])
const teamsLoading = ref(true)
const activeTeamKey = ref('')
const drawnPlayers = ref([])
const dragOverTeamKey = ref('')

const deckOptions = ref([])
const selectedDeckId = ref()
const deckLoading = ref(false)
const drawing = ref(false)
const revealCountdown = ref(0)
const revealInterval = ref(null)
const revealTimeout = ref(null)
const pendingPlayers = ref([])
const cardRemainPlayers = ref([])
const cardRemainLoading = ref(false)
const DEFAULT_REVEAL_SECONDS = 5
const isRevealing = computed(() => revealCountdown.value > 0)
const revealCountdownText = computed(() => (revealCountdown.value > 0 ? revealCountdown.value : 'GO'))
const CELEBRATION_DURATION = 3000
const CARD_REVEAL_INTERVAL = 2000
const isCelebrating = ref(false)
const celebrationTimer = ref(null)
const revealSequenceActive = ref(false)
const revealSequenceTimers = ref([])

const resolveDeckValue = (option) => {
  if (!option) return option
  if (typeof option !== 'object') return option
  return (
    option.value ??
    option.dictValue ??
    option.id ??
    option.key ??
    option.code ??
    option.deckId ??
    option.name ??
    option.label ??
    option
  )
}

const resolveDeckLabel = (option) => {
  if (!option) return ''
  if (typeof option !== 'object') return String(option)
  return option.label ?? option.dictLabel ?? option.name ?? option.title ?? option.text ?? option.value ?? '未命名卡组'
}

const resolveDeckHint = (option) => {
  if (!option || typeof option !== 'object') return '点击切换卡组'
  return option.remark ?? option.description ?? option.tip ?? option.subtitle ?? '点击切换卡组'
}

const normalizedDecks = computed(() =>
  (Array.isArray(deckOptions.value) ? deckOptions.value : [])
    .map((option) => {
      const value = resolveDeckValue(option)
      return {
        raw: option,
        value,
        label: resolveDeckLabel(option),
        hint: resolveDeckHint(option)
      }
    })
    .filter(
      (deck) =>
        deck.value !== undefined &&
        deck.value !== null &&
        deck.value !== ''
    )
)

const handleDeckSelect = (deck) => {
  if (!deck) return
  const value = deck.value ?? resolveDeckValue(deck.raw)
  if (value === undefined || value === null) return
  if (selectedDeckId.value === value) return
  selectedDeckId.value = value
  clearDrawnPlayers()
}

const captainOptions = ref([])
const captainLoading = ref(false)
const draggingPlayer = ref(null)

const playerCache = reactive({})
const MEMBER_SLOT_COUNT = 4

const createLocalKey = () => `${Date.now()}-${Math.random().toString(16).slice(2)}`

const normalizeMemberIds = (memberIds = []) => {
  const list = Array.isArray(memberIds) ? [...memberIds] : []
  while (list.length < MEMBER_SLOT_COUNT) {
    list.push(null)
  }
  return list.slice(0, MEMBER_SLOT_COUNT)
}

const resolvePlayerId = (player) =>
  player?.account ??
  player?.playId ??
  player?.playerId ??
  player?.captainId ??
  player?.id ??
  player?.value ??
  null

const resolvePlayerName = (player) =>
  player?.nickname ??
  player?.playName ??
  player?.captainName ??
  player?.name ??
  player?.playerName ??
  player?.label ??
  ''

const setPlayerCache = (player) => {
  const id = resolvePlayerId(player)
  if (!id) return
  const nickname = resolvePlayerName(player)
  const existing = playerCache[id] || { id }
  playerCache[id] = {
    ...existing,
    ...player,
    id,
    account: player?.account ?? player?.playId ?? existing.account ?? id,
    nickname: nickname || existing.nickname || existing.playName || id,
    name: player?.name ?? existing.name,
    playName: player?.playName ?? existing.playName,
    description: player?.description ?? player?.tags ?? existing.description,
    level: player?.level ?? player?.ability ?? existing.level,
    position: player?.position ?? player?.positions ?? existing.position
  }
}

const ensureMemberPlaceholder = (memberId) => {
  if (!memberId) return
  if (!playerCache[memberId]) {
    playerCache[memberId] = { id: memberId, nickname: memberId }
  }
}

const normalizeTeam = (team = {}) => {
  const rawMembers = Array.isArray(team.memberList) ? team.memberList : team.members
  if (Array.isArray(rawMembers)) {
    rawMembers.forEach((member) => setPlayerCache(member))
  }
  const rawMemberIds = Array.isArray(team.memberIds)
    ? team.memberIds
    : Array.isArray(rawMembers)
      ? rawMembers.map((member) => member?.id).filter(Boolean)
      : []
  const normalized = {
    id: team.id,
    matchId: team.matchId || matchId.value,
    captainId: team.captainId ?? undefined,
    memberIds: normalizeMemberIds(rawMemberIds),
    propsRepick: team.propsRepick ?? false,
    propsSkip: team.propsSkip ?? false,
    propsVeto: team.propsVeto ?? false,
    _localKey: team._localKey || createLocalKey()
  }
  normalized.memberIds.forEach(ensureMemberPlaceholder)
  return normalized
}

const createGroupPayload = () => ({
  matchId: matchId.value,
  captainId: undefined,
  memberIds: [],
  propsRepick: false,
  propsSkip: false,
  propsVeto: false
})

const defaultTeam = () => normalizeTeam(createGroupPayload())

const teamKey = (team) => (team?.id ? team.id : team?._localKey)

const setActiveTeam = (team) => {
  activeTeamKey.value = teamKey(team) || ''
}

const addTeam = async () => {
  const payload = createGroupPayload()
  try {
    const res = await groupingApi.addGroup({
      ...payload,
      memberIds: []
    })
    const responseData = res && typeof res === 'object' ? res : payload
    const newTeam = normalizeTeam(responseData)
    teams.value.push(newTeam)
    setActiveTeam(newTeam)
  } catch (error) {
    console.error(error)
    message.error('新增队伍失败')
  }
}

const removeTeam = async (team) => {
  const key = teamKey(team)
  if (!key) return
  if (team?.id) {
    try {
      await groupingApi.deleteGroup([{ id: team.id }])
    } catch (error) {
      console.error(error)
      message.error('删除队伍失败')
      return
    }
  }
  teams.value = teams.value.filter((item) => teamKey(item) !== key)
  if (activeTeamKey.value === key) {
    activeTeamKey.value = teams.value[0] ? teamKey(teams.value[0]) : ''
  }
}

const removeMember = (team, memberIndex) => {
  if (!Array.isArray(team.memberIds)) return
  const playerId = team.memberIds[memberIndex]
  team.memberIds.splice(memberIndex, 1, null)
  if (team?.id && playerId) {
    groupingApi.updateGroup({
      groupId: null,
      captain: false,
      playerId
    })
  }
}

const handleDragStart = (event, player, index) => {
  if (event?.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move'
    const playerId = resolvePlayerId(player)
    if (playerId) {
      event.dataTransfer.setData('text/plain', playerId)
    }
  }
  draggingPlayer.value = {
    player,
    playerId: resolvePlayerId(player),
    index
  }
}

const handleDragEnd = () => {
  draggingPlayer.value = null
  dragOverTeamKey.value = ''
}

const handleTeamDragOver = (team) => {
  dragOverTeamKey.value = teamKey(team)
}

const handleTeamDragLeave = (team) => {
  if (dragOverTeamKey.value === teamKey(team)) {
    dragOverTeamKey.value = ''
  }
}

const handleDrop = async (team, memberIndex) => {
  if (!draggingPlayer.value) return
  const success = assignPlayer(team, draggingPlayer.value.player, memberIndex)
  if (success) {
    removeFromDrawn(draggingPlayer.value.index)
    if (team?.id && draggingPlayer.value.playerId) {
      await groupingApi.updateGroup({
        groupId: team.id,
        captain: false,
        playerId: draggingPlayer.value.playerId
      })
    }
    await loadCardRemainPlayers()
  }
  draggingPlayer.value = null
  dragOverTeamKey.value = ''
}

const stopSequentialReveal = () => {
  if (revealSequenceTimers.value.length && typeof window !== 'undefined') {
    revealSequenceTimers.value.forEach((timerId) => window.clearTimeout(timerId))
  }
  revealSequenceTimers.value = []
  revealSequenceActive.value = false
}

const stopCelebration = () => {
  if (celebrationTimer.value && typeof window !== 'undefined') {
    window.clearTimeout(celebrationTimer.value)
  }
  celebrationTimer.value = null
  isCelebrating.value = false
}

const clearDrawnPlayers = () => {
  stopRevealCountdown()
  stopCelebration()
  stopSequentialReveal()
  pendingPlayers.value = []
  drawnPlayers.value = []
}

const revealPlayersSequentially = (players = []) => {
  const queue = Array.isArray(players) ? players.filter(Boolean) : []
  stopSequentialReveal()
  pendingPlayers.value = []
  if (!queue.length) {
    return
  }
  if (typeof window === 'undefined') {
    drawnPlayers.value = queue.map((player) => {
      setPlayerCache(player)
      return player
    })
    revealSequenceActive.value = false
    revealSequenceTimers.value = []
    return
  }
  revealSequenceActive.value = true
  revealSequenceTimers.value = []
  drawnPlayers.value = []
  queue.forEach((player, index) => {
    const timerId = window.setTimeout(() => {
      drawnPlayers.value.push(player)
      setPlayerCache(player)
      if (index === queue.length - 1) {
        revealSequenceTimers.value = []
        revealSequenceActive.value = false
      }
    }, index * CARD_REVEAL_INTERVAL)
    revealSequenceTimers.value.push(timerId)
  })
}

const loadCardRemainPlayers = async () => {
  if (!selectedDeckId.value) {
    cardRemainPlayers.value = []
    return
  }
  cardRemainLoading.value = true
  try {
    const res = await groupingApi.cardRemainPlayers({
      deckId: selectedDeckId.value,
      matchId: matchId.value
    })
    cardRemainPlayers.value = Array.isArray(res) ? res : []
  } catch (error) {
    console.error(error)
  } finally {
    cardRemainLoading.value = false
  }
}

watch(selectedDeckId, async (newVal) => {
  cardRemainPlayers.value = []
  if (!newVal) return
  await loadCardRemainPlayers()
})

const assignPlayer = (team, player, targetIndex) => {
  const playerId = typeof player === 'string' ? player : resolvePlayerId(player)
  if (!playerId) return false
  const exists = team.memberIds.findIndex((memberId) => memberId === playerId)
  if (exists !== -1) {
    message.warning('该选手已在当前队伍中')
    return false
  }
  const emptyIndex =
    typeof targetIndex === 'number' ? targetIndex : team.memberIds.findIndex((memberId) => !memberId)
  if (emptyIndex === -1) {
    message.warning('该队伍已满员')
    return false
  }
  team.memberIds.splice(emptyIndex, 1, playerId)
  if (typeof player === 'object' && player) {
    setPlayerCache(player)
  } else {
    ensureMemberPlaceholder(playerId)
  }
  return true
}

const removeFromDrawn = (index) => {
  if (typeof index !== 'number') return
  drawnPlayers.value.splice(index, 1)
}

const drawPlayers = async () => {
  if (!selectedDeckId.value || isRevealing.value || drawing.value) return
  drawing.value = true
  stopRevealCountdown()
  stopCelebration()
  stopSequentialReveal()
  drawnPlayers.value = []
  pendingPlayers.value = []
  try {
    const res = await groupingApi.drawPlayers({
      deckId: selectedDeckId.value,
      matchId: matchId.value
    })
    pendingPlayers.value = Array.isArray(res) ? res : []
    await loadCardRemainPlayers()
    if (pendingPlayers.value.length) {
      startRevealCountdown()
    } else {
      drawnPlayers.value = []
    }
  } catch (error) {
    console.error(error)
    stopRevealCountdown()
  } finally {
    drawing.value = false
  }
}

const startRevealCountdown = (duration = DEFAULT_REVEAL_SECONDS) => {
  if (!pendingPlayers.value.length) return
  stopRevealCountdown()
  stopCelebration()
  stopSequentialReveal()
  revealCountdown.value = duration
  if (typeof window === 'undefined') return
  revealInterval.value = window.setInterval(() => {
    revealCountdown.value = Math.max(revealCountdown.value - 1, 0)
    if (revealCountdown.value <= 0 && revealInterval.value) {
      window.clearInterval(revealInterval.value)
      revealInterval.value = null
    }
  }, 1000)
  revealTimeout.value = window.setTimeout(() => {
    finishReveal()
  }, duration * 1000)
}

const finishReveal = () => {
  stopRevealCountdown()
  if (!pendingPlayers.value.length) return
  const playersToReveal = [...pendingPlayers.value]
  stopCelebration()
  stopSequentialReveal()
  isCelebrating.value = true
  if (typeof window !== 'undefined') {
    celebrationTimer.value = window.setTimeout(() => {
      stopCelebration()
      revealPlayersSequentially(playersToReveal)
    }, CELEBRATION_DURATION)
  } else {
    stopCelebration()
    revealPlayersSequentially(playersToReveal)
  }
}

const stopRevealCountdown = () => {
  if (typeof window === 'undefined') return
  if (revealInterval.value) {
    window.clearInterval(revealInterval.value)
    revealInterval.value = null
  }
  if (revealTimeout.value) {
    window.clearTimeout(revealTimeout.value)
    revealTimeout.value = null
  }
  revealCountdown.value = 0
}

const loadDecks = () => {
  deckLoading.value = true
  deckOptions.value = tool.dictList('card_group') || []
  deckLoading.value = false
}

const loadCaptains = async () => {
  captainLoading.value = true
  try {
    const res = await groupingApi.captainList({ matchId: matchId.value })
    const list = Array.isArray(res) ? res : []
    list.forEach((item) =>
      setPlayerCache({
        ...item,
        id: item.captainId,
        nickname: item.captainName
      })
    )
    captainOptions.value = list.map((item) => ({
      label: item.captainName,
      value: item.captainId
    }))
  } catch (error) {
    console.error(error)
  } finally {
    captainLoading.value = false
  }
}

const syncCaptainOptionsWithTeams = () => {
  teams.value.forEach((team) => {
    const captainId = team?.captainId
    if (!captainId) return
    ensureMemberPlaceholder(captainId)
    const label = playerCache[captainId]?.nickname || playerCache[captainId]?.name || captainId
    const existing = captainOptions.value.find((item) => item.value === captainId)
    if (existing) {
      existing.label = label
    } else {
      captainOptions.value.push({
        value: captainId,
        label
      })
    }
  })
}

const loadMatchPlayers = async () => {
  if (!matchId.value) return
  const pageSize = 100
  let current = 1
  let hasMore = true
  try {
    while (hasMore) {
      const res = await matchPlayerApi.matchPlayerPage({
        current,
        size: pageSize,
        matchId: matchId.value
      })
      const records = Array.isArray(res?.records)
        ? res.records
        : Array.isArray(res?.data)
          ? res.data
          : Array.isArray(res)
            ? res
            : []
      records
        .filter((item) => !item?.matchId || item.matchId === matchId.value)
        .forEach((item) =>
          setPlayerCache({
            ...item,
            id: item.playId,
            nickname: item.playName,
            account: item.playId,
            position: item.positions,
            level: item.ability
          })
        )
      const total = res?.total ?? res?.data?.total
      if (total && current * pageSize >= total) {
        hasMore = false
      } else if (!records.length || records.length < pageSize) {
        hasMore = false
      } else {
        current += 1
      }
    }
  } catch (error) {
    console.error(error)
  }
}

const loadGrouping = async () => {
  teamsLoading.value = true
  try {
    const res = await groupingApi.groupingDetail({ matchId: matchId.value })
    const teamList = Array.isArray(res) ? res : res?.teams
    if (Array.isArray(teamList) && teamList.length) {
      teams.value = teamList.map((team) => normalizeTeam(team))
      syncCaptainOptionsWithTeams()
      setActiveTeam(teams.value[0])
    } else {
      teams.value = []
    }
  } catch (error) {
    console.error(error)
  } finally {
    teamsLoading.value = false
  }
  // const fallback = defaultTeam()
  // teams.value = [fallback]
  // setActiveTeam(fallback)
}

onMounted(async () => {
  loadDecks()
  await loadCaptains()
  await loadMatchPlayers()
  await loadGrouping()
})

onUnmounted(() => {
  stopRevealCountdown()
  stopCelebration()
  stopSequentialReveal()
  pendingPlayers.value = []
})

const getMemberName = (memberId) => {
  if (!memberId) return ''
  ensureMemberPlaceholder(memberId)
  const info = playerCache[memberId]
  return info?.nickname || info?.name || memberId
}

const getMemberTooltip = (memberId) => {
  if (!memberId) return '移除该成员'
  ensureMemberPlaceholder(memberId)
  return playerCache[memberId]?.description || '移除该成员'
}

const handleCaptainChange = (team, value) => {
  team.captainId = value
  const option = captainOptions.value.find((item) => item.value === value)
  if (option) {
    setPlayerCache({
      id: value,
      nickname: option.label,
      captainId: value
    })
  }
  groupingApi.updateGroup({
    groupId: team.id,
    captain: true,
    playerId : value
  })
  syncCaptainOptionsWithTeams()
}

const handlePropsChange = async (team) => {
  if (!team?.id) return
  try {
    await groupingApi.editGroup({
      id: team.id,
      propsRepick: team.propsRepick,
      propsSkip: team.propsSkip,
      propsVeto: team.propsVeto
    })
  } catch (error) {
    console.error(error)
  }
}
</script>

<style lang="less" scoped>
.grouping-page {
  position: relative;
  min-height: 100vh;
  padding: 15px;
  background: radial-gradient(circle at 10% 20%, #080c1b, #050714 55%, #02040c 100%);
  color: #dce4ff;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &::before,
  &::after {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: 1;
    pointer-events: none;
  }

  &::before {
    background: radial-gradient(circle at 18% 22%, rgba(114, 46, 209, 0.55), transparent 50%),
      radial-gradient(circle at 80% 25%, rgba(22, 119, 255, 0.45), transparent 52%),
      radial-gradient(circle at 55% 78%, rgba(82, 196, 26, 0.32), transparent 60%);
    filter: blur(120px);
    animation: auroraShift 18s linear infinite;
    opacity: 0.75;
  }

  &::after {
    background-image: linear-gradient(120deg, rgba(93, 110, 255, 0.12) 1px, transparent 1px),
      linear-gradient(300deg, rgba(93, 110, 255, 0.12) 1px, transparent 1px);
    background-size: 70px 70px;
    animation: holoGrid 30s linear infinite;
    opacity: 0.35;
  }

  > * {
    position: relative;
    z-index: 2;
  }

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(25, 32, 68, 0.9), rgba(17, 22, 49, 0.72));
    border: 1px solid rgba(114, 46, 209, 0.35);
    box-shadow: 0 12px 32px rgba(8, 14, 36, 0.42);
    backdrop-filter: blur(16px);

    .page-title {
      font-family: 'Orbitron', 'Rajdhani', sans-serif;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 6px;
      text-transform: uppercase;
      color: #f4f7ff;
      text-shadow: 0 0 14px rgba(114, 46, 209, 0.6);
    }
  }

  .page-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-gap: 20px;
  }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d0dcff;
  }

  .panel-header__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .panel-header__title {
    font-size: 16px;
    color: #eef3ff;
  }

  .panel-sub {
    color: rgba(210, 220, 255, 0.6);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: none;
  }

  .panel-header__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 36px;
    border-radius: 999px;
    background: rgba(114, 46, 209, 0.18) !important;
    border: 1px solid rgba(114, 46, 209, 0.5) !important;
    color: #f7f4ff !important;
    box-shadow: 0 12px 30px rgba(19, 22, 60, 0.45);

    &:hover,
    &:focus {
      background: rgba(114, 46, 209, 0.32) !important;
      border-color: rgba(114, 46, 209, 0.7) !important;
      color: #ffffff !important;
      box-shadow: 0 16px 36px rgba(33, 46, 120, 0.55);
    }
  }

  .teams-panel,
  .draw-panel {
    background: linear-gradient(150deg, rgba(16, 21, 48, 0.92), rgba(10, 14, 32, 0.9));
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(114, 46, 209, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 40px rgba(9, 12, 35, 0.55);
    backdrop-filter: blur(22px);
  }

  .team-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 6px;
  }

  .teams-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;

    :deep(.ant-spin) {
      color: #d0dcff;
    }

    :deep(.ant-spin-text) {
      margin-top: 12px;
      color: rgba(208, 220, 255, 0.75);
      letter-spacing: 1px;
    }
  }

  .team-card {
    position: relative;
    background: linear-gradient(160deg, rgba(21, 29, 60, 0.95), rgba(12, 16, 38, 0.9));
    border-radius: 18px;
    padding: 20px 18px;
    margin-top: 10px;
    border: 1px solid rgba(69, 106, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 18px;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 14px 36px rgba(5, 8, 28, 0.45);

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(114, 46, 209, 0.4), rgba(22, 119, 255, 0.32), rgba(82, 196, 26, 0.28));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    // &:hover,
    // &.active {
    //   transform: translateY(-4px);
    //   border-color: rgba(114, 46, 209, 0.65);
    //   box-shadow: 0 16px 42px rgba(22, 33, 78, 0.55);

    //   &::after {
    //     opacity: 1;
    //   }
    // }

    &.drag-over {
      border-color: rgba(82, 196, 26, 0.8);
      box-shadow: 0 0 18px rgba(82, 196, 26, 0.4);
    }

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__title {
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #f1f5ff;
    }
  }

  .section-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #eef3ff;
    margin-bottom: 6px;
  }

  .member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 14px;
  }

  .member-slot {
    background: linear-gradient(160deg, rgba(15, 22, 48, 0.9), rgba(12, 18, 38, 0.85));
    border-radius: 12px;
    border: 1px dashed rgba(114, 46, 209, 0.4);
    padding: 14px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;

    &:hover {
      border-color: rgba(22, 119, 255, 0.8);
      background: rgba(22, 119, 255, 0.12);
      transform: translateY(-2px);
    }
  }

  .member-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(208, 214, 255, 0.6);
    font-size: 12px;

    &__icon {
      font-size: 26px;
      color: rgba(114, 46, 209, 0.7);
    }
  }

  .member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: rgba(17, 23, 52, 0.85);
    box-shadow: inset 0 0 0 1px rgba(114, 46, 209, 0.25);

    &__remove {
      position: absolute;
      top: 10px;
      right: 10px;
      color: rgba(255, 82, 82, 0.85);
      padding: 0;
      line-height: 1;
    }

    &__info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .member-name {
      font-size: 15px;
      font-weight: 500;
      color: #fdfdff;
    }

    .member-role {
      font-size: 12px;
      color: rgba(208, 220, 255, 0.6);
    }
  }

  .draw-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;

    .deck-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
      min-height: 64px;
    }

    .deck-selector__loading {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px 0;
    }

    .deck-card {
      position: relative;
      width: 100%;
      min-width: 0;
      border-radius: 14px;
      padding: 16px 18px;
      background: linear-gradient(140deg, rgba(32, 40, 82, 0.92), rgba(20, 24, 52, 0.9));
      border: 1px solid rgba(86, 120, 250, 0.25);
      box-shadow: 0 12px 28px rgba(12, 16, 44, 0.55);
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;

      &__shine {
        position: absolute;
        inset: -40% -20%;
        background: radial-gradient(circle at 20% 20%, rgba(118, 96, 255, 0.35), transparent 60%);
        opacity: 0.4;
        pointer-events: none;
        transition: transform 0.4s ease, opacity 0.4s ease;
      }

      &__content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      &__title {
        font-family: 'Orbitron', sans-serif;
        font-size: 14px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #f5f7ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &__subtitle {
        font-size: 12px;
        color: rgba(210, 220, 255, 0.68);
      }

      &:hover {
        transform: translateY(-4px);
        border-color: rgba(122, 99, 255, 0.6);
        box-shadow: 0 16px 36px rgba(22, 28, 62, 0.55);

        .deck-card__shine {
          opacity: 0.65;
          transform: scale(1.05);
        }
      }

      &.active {
        border-color: rgba(159, 112, 255, 0.85);
        box-shadow: 0 18px 42px rgba(46, 34, 102, 0.6);

        .deck-card__shine {
          opacity: 0.8;
          transform: scale(1.15);
        }
      }
    }

    @media (max-width: 1280px) {
      .deck-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 960px) {
      .deck-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .deck-selector {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
    }

    &__section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    &__result {
      position: relative;
      flex: 1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
      align-content: start;
    }
  }

  .card-remain-section {
    background: rgba(18, 25, 52, 0.45);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(82, 112, 220, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  }

  .card-remain-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .card-remain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
  }

  .card-remain-refresh {
    min-width: 80px;
    border-radius: 999px;
    padding: 0 16px;
    background: linear-gradient(135deg, rgba(82, 55, 255, 0.28), rgba(140, 78, 255, 0.22)) !important;
    border: 1px solid rgba(118, 90, 255, 0.45) !important;
    color: rgba(225, 230, 255, 0.9) !important;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1.5px;

    &:hover {
      background: linear-gradient(135deg, rgba(101, 69, 255, 0.45), rgba(167, 105, 255, 0.35)) !important;
      border-color: rgba(150, 120, 255, 0.65) !important;
      color: #ffffff !important;
      box-shadow: 0 12px 28px rgba(80, 65, 200, 0.45);
    }
  }
}

.card-remain-list :deep(.ant-tag) {
  position: relative;
  background: linear-gradient(135deg, rgba(62, 38, 150, 0.45), rgba(121, 52, 210, 0.38));
  border: 1px solid rgba(132, 90, 255, 0.6);
  border-radius: 999px;
  padding: 4px 16px;
  color: #f6f4ff;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(26, 32, 78, 0.45);
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    inset: -20% 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s ease, transform 0.6s ease;
  }

  &:hover::after {
    opacity: 1;
    transform: translateX(0%);
  }
}

.draw-card {
  background: linear-gradient(160deg, rgba(26, 35, 76, 0.92), rgba(19, 25, 53, 0.88));
  border-radius: 14px;
  // padding: 18px;
  border: 1px solid rgba(69, 106, 255, 0.25);
  width: 100%;
  min-height: 260px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 14px 30px rgba(12, 16, 40, 0.55);

  &:hover {
    transform: translateY(-4px);
    border-color: rgba(114, 46, 209, 0.8);
    box-shadow: 0 18px 42px rgba(22, 26, 60, 0.6);
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__nickname {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    font-weight: 600;
    color: #f8fbff;
  }

  &__meta,
  &__desc {
    font-size: 12px;
    color: rgba(210, 220, 255, 0.65);
    line-height: 1.5;
  }
}

.draw-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(28, 36, 74, 0.92), rgba(18, 23, 52, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 45px rgba(8, 12, 32, 0.6);
  border: 1px solid rgba(108, 140, 240, 0.22);
  overflow: hidden;
  height: 100%;
}

.draw-card__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% -10%, rgba(255, 210, 128, 0.22), transparent 50%),
    radial-gradient(circle at 90% 120%, rgba(95, 140, 255, 0.24), transparent 60%);
  opacity: 0.55;
  pointer-events: none;
}

.draw-card__frame::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 198, 88, 0.28);
  box-shadow: 0 0 24px rgba(255, 182, 66, 0.15);
  pointer-events: none;
}

.draw-card__nickname {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: 600;
  color: #fff5ec;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 8px 18px rgba(12, 16, 40, 0.45);
}

.draw-card__divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 198, 96, 0), rgba(255, 198, 96, 0.9), rgba(255, 198, 96, 0));
  opacity: 0.85;
}

.draw-card__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 214, 128, 0.92), rgba(255, 172, 66, 0.78));
  box-shadow: 0 6px 14px rgba(255, 172, 66, 0.35);
}

.draw-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  color: rgba(219, 227, 255, 0.9);
}

.draw-card__position {
  font-size: 13px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255, 214, 128, 0.92);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  text-shadow: 0 6px 18px rgba(255, 178, 66, 0.3);
}

.draw-card__desc {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(210, 220, 255, 0.7);
}
.draw-card__desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(210, 220, 255, 0.7);
}

@media (max-width: 1280px) {
  .draw-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .draw-card-list {
    grid-template-columns: 1fr;
  }
}

.draw-button {
  min-width: 120px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(84, 47, 255, 0.95), rgba(140, 77, 255, 0.85)) !important;
  border: 1px solid rgba(132, 74, 255, 0.7) !important;
  box-shadow: 0 18px 36px rgba(82, 55, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fdfbff !important;
  position: relative;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    box-shadow: 0 20px 44px rgba(96, 72, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.2);

    &:before {
      opacity: 1;
    }
  }
}

.reset-button {
  min-width: 90px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px !important;
  background: rgba(38, 52, 92, 0.85) !important;
  border: 1px solid rgba(82, 112, 210, 0.4) !important;
  color: rgba(210, 224, 255, 0.85) !important;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;

  &:hover {
    background: rgba(53, 72, 126, 0.95) !important;
    border-color: rgba(122, 156, 255, 0.6) !important;
    color: #f2f6ff !important;
  }
}

.team-card__props {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.prop-switch {
  flex: 1;
  background: linear-gradient(140deg, rgba(18, 26, 56, 0.95), rgba(11, 17, 40, 0.9));
  border: 1px solid rgba(69, 106, 255, 0.28);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);

  &:hover {
    border-color: rgba(114, 46, 209, 0.7);
    transform: translateY(-2px);
  }

  &__label {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f4f7ff;
  }
}

.draw-panel__result {
  position: relative;
}

.draw-card-list {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  padding-bottom: 8px;
}

.draw-card-list__inner {
  display: contents;
}

.reveal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  background: rgba(15, 23, 42, 0.7);
  border-radius: 12px;
  z-index: 10;
  overflow: hidden;
}

.reveal-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(114, 46, 209, 0.6);
  animation: pulse-ring 1.5s infinite ease-in-out;
}

.reveal-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 46, 209, 0.55), rgba(114, 46, 209, 0));
  filter: blur(6px);
  animation: glow-flicker 1.2s infinite alternate;
}

.reveal-number {
  position: relative;
  font-family: 'Orbitron', 'Rajdhani', 'DIN Condensed', 'Roboto Mono', monospace;
  font-size: 72px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 18px rgba(114, 46, 209, 0.85), 0 0 36px rgba(114, 46, 209, 0.45);
  animation: number-pop 0.9s infinite;
}

.reveal-caption {
  position: relative;
  margin-top: 16px;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.countdown-pop-enter-active,
.countdown-pop-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.countdown-pop-enter-from,
.countdown-pop-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.countdown-pop-enter-to,
.countdown-pop-leave-from {
  opacity: 1;
  transform: scale(1);
}

.card-appear-enter-active,
.card-appear-leave-active,
.card-appear-move {
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.7s ease, box-shadow 0.7s ease;
}

.card-appear-enter-from {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.92);
  box-shadow: 0 0 0 rgba(255, 198, 66, 0);
  filter: brightness(1.4) saturate(1.1);
}

.card-appear-enter-to {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow: 0 14px 30px rgba(12, 16, 40, 0.55);
  filter: brightness(1);
}

.card-appear-leave-from {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.card-appear-leave-to {
  opacity: 0;
  transform: translate3d(0, -20px, 0) scale(0.94);
}

.card-appear-enter-active {
  position: relative;
  overflow: hidden;
}

.card-appear-enter-active::after {
  content: '';
  position: absolute;
  inset: -30% -10%;
  background: linear-gradient(120deg, rgba(255, 210, 112, 0.88), rgba(255, 160, 45, 0.45));
  opacity: 0;
  transform: translateX(-90%) skewX(-8deg);
  animation: card-shimmer 0.95s ease forwards;
  pointer-events: none;
}

.celebrate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(32, 18, 63, 0.88), rgba(15, 23, 42, 0.85));
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 40px rgba(114, 46, 209, 0.35), inset 0 0 80px rgba(56, 189, 248, 0.28);
}

.celebrate-burst {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(114, 46, 209, 0) 55%);
  animation: burst-wave 1.4s ease-out forwards;
  mix-blend-mode: screen;
}

.celebrate-burst--delay {
  animation-delay: 0.25s;
  opacity: 0.75;
}

.celebrate-stars {
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.celebrate-stars::before,
.celebrate-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    radial-gradient(rgba(56, 189, 248, 0.6) 1px, transparent 1px),
    radial-gradient(rgba(249, 115, 22, 0.55) 1px, transparent 1px);
  background-size: 80px 80px, 100px 100px, 120px 120px;
  animation: star-drift 3.5s linear infinite;
}

.celebrate-stars::after {
  animation-duration: 2.7s;
  animation-direction: reverse;
  opacity: 0.7;
}

.celebrate-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  color: #fff;
  text-shadow: 0 0 12px rgba(114, 46, 209, 0.8), 0 0 24px rgba(56, 189, 248, 0.55);
  animation: celebrate-pulse 1.4s ease-in-out;
}

.celebrate-text__title {
  font-family: 'Orbitron', 'Rajdhani', 'DIN Condensed', sans-serif;
  font-size: 28px;
  letter-spacing: 8px;
}

.celebrate-text__subtitle {
  font-size: 16px;
  letter-spacing: 4px;
  color: rgba(212, 229, 255, 0.95);
}

.celebrate-fade-enter-active,
.celebrate-fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.celebrate-fade-enter-from,
.celebrate-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.celebrate-fade-enter-to,
.celebrate-fade-leave-from {
  opacity: 1;
  transform: scale(1);
}

:deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #5f3bff, #8c4eff);
  border: none;
  box-shadow: 0 10px 24px rgba(95, 59, 255, 0.35);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;

  &:hover,
  &:focus {
    background: linear-gradient(135deg, #724dff, #a561ff);
    box-shadow: 0 12px 30px rgba(114, 77, 255, 0.45);
  }
}

:deep(.ant-btn-text) {
  color: rgba(255, 132, 132, 0.9);

  &:hover {
    color: rgba(255, 148, 148, 1);
  }
}

:deep(.ant-select) {
  color: #e4ebff;
}

:deep(.ant-select-selector) {
  background: rgba(17, 24, 54, 0.85) !important;
  border: 1px solid rgba(114, 46, 209, 0.4) !important;
  box-shadow: inset 0 0 12px rgba(17, 24, 54, 0.45);
  color: #f8fbff !important;
}

:deep(.ant-select-selection-placeholder) {
  color: rgba(208, 220, 255, 0.6) !important;
}

:deep(.ant-select-arrow) {
  color: rgba(208, 220, 255, 0.7);
}

:deep(.ant-switch) {
  background: rgba(48, 56, 92, 0.85);
}

:deep(.ant-switch-checked) {
  background: linear-gradient(135deg, #5f3bff, #8c4eff);
  box-shadow: 0 0 14px rgba(95, 59, 255, 0.6);
}

:deep(.ant-empty-description) {
  color: rgba(210, 220, 255, 0.65);
}

@keyframes auroraShift {
  0% {
    transform: translate3d(-10%, -6%, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(6%, 8%, 0) rotate(5deg);
  }
  100% {
    transform: translate3d(-10%, -6%, 0) rotate(0deg);
  }
}

@keyframes holoGrid {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-60px, -60px, 0);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.6;
  }
}

@keyframes glow-flicker {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0.8;
  }
}

@keyframes number-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes card-shimmer {
  0% {
    opacity: 0;
    transform: translateX(-80%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes burst-wave {
  0% {
    transform: scale(0.2);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes star-drift {
  0% {
    transform: translate3d(-10px, -10px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(10px, 12px, 0) rotate(1turn);
  }
  100% {
    transform: translate3d(-10px, -8px, 0) rotate(2turn);
  }
}

@keyframes celebrate-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  30% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>

